<template>
  <div>
    <ChiZhanVideo
            ref="ChiZhanVideoVideo"
            :source="source"
            :cover="cover"
            :progressMarkers="progressMarkers"
            width="800px"
            height="300px"
    ></ChiZhanVideo>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import ChiZhanVideo from '@/components/video/index.vue';
  @Component({
    components:{
      ChiZhanVideo
    }
  })
  export default class extends Vue {

    source = {
      "HD":"//player.alicdn.com/resource/player/qupai.mp4",
      "SD":"//player.alicdn.com/resource/player/qupai.mp4"}; // 视频来源 可多种画质 根据配置来设定
    cover = 'https://img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg'; // 视频封面图
    progressMarkers = [{
      offset: 30,
      isCustomized:true,
      coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/9A3F562E595E4764AD1DD546FA52C6E5-6-2.png',
      title: 'test title',
      describe: '312321321321g',
    }, {
      offset:50,
      isCustomized:true,
      coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/1E7F402241CD4C0F94AD2BBB5CCC3EC7-6-2.png',
      title: 'test title',
      describe: 'test string',
    }, {
      offset:150,
      isCustomized:true,
      coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
      title: 'test title',
      describe: 'test string',
    }, {
      offset:120,
      isCustomized:true,
      coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
      title: 'test title',
      describe: 'test string',
    }]; // 视频进度条的标记
  }
</script>

<style lang="scss" scoped>

</style>
